<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>添加商品-商品管理</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;">
    <link rel="stylesheet" href="/css/cp.css"/>
    <style>
        .sp-tree {
            display: none;
            position: absolute;
            z-index: 199999999;
            width: 300px;
            /*height: 100px;*/
            padding: 10px;
            overflow-y: auto;
            background: #fff;
            border: 1px solid #d3d3d3;
        }

        .sp-tree li {
            position: relative;
            font-size: 12px;
            line-height: 20px;
            padding-left: 20px
        }

        .sp-tree li li {
            border-left: 1px solid #ccc;
        }

        .sp-tree li h3 {
            font-weight: normal;
            cursor: pointer;
        }

        .sp-tree li h3 b {
        }

        .sp-tree li h3 b:hover {
            text-decoration: underline;
        }

        .sp-tree li i {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 16px;
            font-weight: bold;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        .sp-tree li ul {
            display: none;
        }
    </style>
    <!-- start cp-wrapper -->
    <div class="cp-wrapper">

        <form id="uploadForm">
            <div class="cp-hash" id="jbxx"><h3>基本信息</h3></div>
            <div class="cp-details">
                <div class="cp-input">
                    <span>商品标题：</span><input type="text" name="title" placeholder="最多允许输入5-15个汉字">
                </div>
                <div class="cp-input">
                    <span>商品编码：</span><input type="text" name="number" placeholder="请输入商品编码" autocomplete="off">
                </div>
                <div class="cp-input">
                    <span>采购价：</span><input type="number" name="cost_price" id="cost_price" placeholder="默认采购价">
                </div>
                <div class="cp-input">
                    <span>建议售价：</span><input type="number" name="salePrice" placeholder="建议最低价">
                </div>
                <div class="cp-input">
                    <span>运  费：</span><input type="number" name="freight" placeholder="运  费">
                </div>
                <div class="cp-input" id="categoryDIV">
                    <span>商品分类：</span>
                    <input type="text" id="sp-sort" name="category" placeholder="请选择分类" autocomplete="off" readonly>
                    <input type="hidden" name="categoryId" id="categoryId" value="0"/>
                </div>
                <div class="cp-input">
                    <span>计量单位：</span>

                    <select name="spunit" id="sp-unit">
                        <option  disabled>请选择</option>
                        <option th:each="UnitEntiy:${unitList}" selected th:value="${UnitEntiy.getId()}"
                                th:text="${UnitEntiy.getName()}"></option>
                    </select>
                </div>
                <div class="cp-input">
                    <span>商品品牌：</span>

                    <select name="brand" id="sp-brands">
                        <option disabled>请选择</option>
                        <option th:each="item:${brands}" selected th:value="${item.getId()}"
                                th:text="${item.getName()}"></option>
                    </select>



                </div>
                <div class="cp-input">
                    <span>供应商：</span>

                    <select name="client" id="sp-client">
                        <option selected disabled>请选择</option>
                        <option th:each="item:${client}" th:value="${item.getId()}"
                                th:text="${item.getName()}"></option>
                    </select>

                </div>
                <div class="cp-input" style="width: 1000px">
                    <span>服装属性：</span>
                    <select name="jijie" id="jijie" >
                        <option value="" selected disabled>季节</option>

                        <option value="春秋季">春秋季</option>
                        <option value="夏季">夏季</option>
                        <option value="冬季">冬季</option>
                        <option value="不分季节">不分季节</option>
                    </select>
                   <select name="fenlei" id="fenlei">
                       <option value="" selected disabled>弹力</option>
                       <option value="无弹">无弹</option>
                       <option value="微弹">微弹</option>
                       <option value="中弹">中弹</option>
                       <option value="高弹">高弹</option>
                   </select>
                    <select name="fengge" id="fengge">
                       <option value="" selected disabled>腰型</option>
                       <option value="高腰">高腰</option>
                       <option value="中腰">中腰</option>
                       <option value="低腰">低腰</option>
                   </select>
<!--                    <select name="fenlei" id="fenlei">-->
<!--                        <option value="" selected disabled>品类</option>-->
<!--                        <option value="外套">外套</option>-->
<!--                        <option value="衬衫">衬衫</option>-->
<!--                        <option value="针织衫">针织衫</option>-->
<!--                        <option value="T恤">T恤</option>-->
<!--                        <option value="卫衣/绒衫">卫衣/绒衫</option>-->
<!--                        <option value="裤子">裤子</option>-->
<!--                        <option value="裙子">裙子</option>-->
<!--                        <option value="内衣">内衣</option>-->
<!--                        <option value="泳装">泳装</option>-->
<!--                        <option value="套装">套装</option>-->
<!--                    </select>-->
<!--                    <select name="fengge" id="fengge">-->
<!--                        <option value="" selected disabled>风格</option>-->
<!--                        <option value="瑞丽">瑞丽</option>-->
<!--                        <option value="嘻皮">嘻皮</option>-->
<!--                        <option value="百搭">百搭</option>-->
<!--                        <option value="淑女">淑女</option>-->
<!--                        <option value="韩版">韩版</option>-->
<!--                        <option value="民族">民族</option>-->
<!--                        <option value="欧美">欧美</option>-->
<!--                        <option value="学院">学院</option>-->
<!--                        <option value="通勤">通勤</option>-->
<!--                        <option value="中性">中性</option>-->
<!--                        <option value="嘻哈">嘻哈</option>-->
<!--                        <option value="田园">田园</option>-->
<!--                        <option value="朋克">朋克</option>-->
<!--                        <option value="OL">OL</option>-->
<!--                        <option value="洛丽塔">洛丽塔</option>-->
<!--                        <option value="街头">街头</option>-->
<!--                        <option value="简约">简约</option>-->
<!--                        <option value="波西米亚">波西米亚</option>-->
<!--                        <option value="森林系">森林系</option>-->
<!--                    </select>-->
                    <select name="nianfen" id="nianfen" style="width: 120px">
                        <option value=""  disabled>年份</option>
                        <option value="2022" selected>2022</option>
                        <option value="2021">2021</option>
                        <option value="2020">2020</option>
                        <option value="2019">2019</option>
                    </select>
<!--                    <span>默认仓库：</span>-->
<!--                    <select name="locationId" id="locationId" >-->
<!--                        <option disabled>仓库</option>-->
<!--                        <option th:each="it:${houses}" th:value="${it.getId()}" th:text="${it.getName()}"></option>-->
<!--                    </select>-->
<!--                    <select id="reservoir" name="reservoirId" onchange="addReservoir(this)">-->
<!--                        <option selected disabled>库区</option>-->
<!--                    </select>-->
<!--                    <select id="shelf" name="shelfId">-->
<!--                        <option selected disabled>货架</option>-->
<!--                    </select>-->
                </div>
                <div class="cp-input" style="width: 1000px">
                    <span>面料成份：</span>
                    <input type="text" name="mianliao" id="mianliao" placeholder="面料">
                </div>
                <div class="cp-input" style="width: 1200px;display: none;">
                    <span>尺码：</span>
       
                    
                    <input type="number" name="yaokuo" id="yaokuo" placeholder="腰围(cm)" value="0" style="width:75px">
                    <input type="number" name="tunkuo" id="tunkuo" placeholder="臀围(cm)" value="0" style="width:75px">
                    <input type="number" name="xiongkuo" id="xiongkuo" placeholder="大腿围(cm)" value="0"  style="width:75px">
                    <input type="number" name="xiuchang" id="xiuchang" placeholder="前挡(cm)" value="0" style="width:75px" />
                    <input type="number" name="yichang" id="yichang" placeholder="裤长(cm)" value="0" style="width:110px" />
                    <input type="number" name="jiankuo" id="jiankuo" placeholder="裤长2(cm)" value="0" style="width:75px">
                    <input type="number" name="zhongliang" id="zhongliang" placeholder="重量(g)" value="0" style="width:75px">

                </div>


                <div class="cp-input">
                    <span>备&nbsp;&nbsp;&nbsp;&nbsp;注:</span>

                    <input type="text" name="beizhu" id="beizhu" placeholder="建议80-110斤">
                </div>
            </div>
            <div class="cp-hash" id="xsxx"><h3>尺码表</h3></div>
            <div class="cp-product">
                    <ul class="sp-guige">
                        <li>
                            <span><img><input type="file" onchange="addImage(this)"><input type="text" style="padding-left:40px;width:600px" name="sizeImg"><em>+</em></span>
                        </li>
                    </ul>
       
                </div>

            <div class="cp-hash" id="xsxx"><h3>商品规格设置</h3></div>
            <!-- 销售信息 规格 start -->
            <div class="cp-product">
                <div class="sp-box">
                    <h3>颜色</h3>
                    <ul class="sp-guige" id="sp-color">

                    </ul>
                    <div class="sp-guige-select">
                        <span id="color-select">添加颜色规格值</span>
                    </div>
                </div>
                <div class="sp-box">
                    <h3>尺码</h3>
                    <ul class="sp-guige" id="sp-size">

                    </ul>
                    <div class="sp-guige-select">
                        <span id="size-select">添加尺码规格值</span>
                    </div>
                </div>
               <div class="sp-box">
                   <h3>款式</h3>
                   <ul class="sp-guige" id="sp-style">

                   </ul>
                   <div class="sp-guige-select">
                       <span id="style-select">添加款式规格值</span>
                   </div>
               </div>
                <div class="sp-box">
                    <h3>规格</h3>
                    <div>
                        <!-- <span style="float:right;" class="layui-btn">自动设置规格编码</span> -->
                    </div>
                    <table class="sp-standard">
                        <thead id="sp-thead"></thead>
                        <tbody id="sp-tbody"></tbody>
                    </table>

                </div>
            </div>
            <!-- 销售信息 规格 end -->


            <!--            <div class="cp-hash" id="qtxx"><h3>其他设置</h3></div>-->
            <!--            <div class="cp-other">-->
            <!--                <input type="hidden" name="freightTemplate" value="0">-->
            <!--                <div class="cp-input">-->
            <!--                    <span>库存预警：</span><input type="number" name="lowQty"  style="width: 100px;" placeholder="最小库存">- -->
            <!--                    <input type="number" name="highQty"  style="width: 100px;" placeholder="最大库存">-->
            <!--                </div>-->
            <!--            </div>-->


            <div class="cp-button">
                <button type="button" id="submit_btn">添加商品</button>
                
            </div>
        </form>


        <script type="text/javascript" src="/js/guige.js"></script>

    </div>
    <!-- end cp-wrapper -->
    <script>
        function addImage(file) {
            var suffix = $(file).val().substring($(file).val().lastIndexOf("."));
            //alert(suffix);
            var number = $("input[name='number']").val();
            var fd = new FileReader();
            var img = file.previousSibling;
            var o = $(img).parent().siblings('input')[1];
            var fileName = number+'_'+ $(o).val() + suffix;
            if($(o).val() == undefined){
                //没有规格的图取本身的名字
                 fileName = $(file).val().substring($(file).val().lastIndexOf("\\")+1);
                // fileName = strFileName;// + suffix;
            }
            // alert($(o).val());
            
            var imgInput = file.nextSibling;
            fd.readAsDataURL(file.files[0]);
            fd.onload = function (e) {
                img.src = this.result;
                img.style.display = 'block';
                $.ajax({
                    url: "/ajax/upload_image_base64",
                    type: "POST",
                    contentType: "application/json;charset=UTF-8",
                    data: JSON.stringify({image: this.result,fileName:fileName}),
                    // processData: false,
                    // contentType: false,
                    // cache: false,
                    dataType: "json",
                    success: function (res) {
                        if (res.code == 0) {
                            imgInput.value = res.data;
                        } else {
                            alert(res.msg);
                        }
                        // alert(JSON.stringify(res));

                    }
                })
                // imgInput.value =this.result;
            };
        }


        $(function () {
            var $sort = null;
            var $tree = null;
            var $status = false;
            var $data = null;
            var $cateId = 0;

            function create(data) {
                if (!data || data.length < 1) return;
                for (var i = 0, n = data.length, tpl = ''; i < n; i++) {
                    if (data[i].child && data[i].child.length > 0) {
                        tpl += '<li><h3><i>+</i><span style="background:#918597" data-id=' + data[i].id + '>' +data[i].id+ data[i].name + '</span></h3><ul style="display: block;">' + create(data[i].child) + '</ul></li>';
                    } else {
                        tpl += '<li><h3><b data-id=' + data[i].id + '>' + data[i].id +data[i].name + '</b></h3></li>';
                    }
                }
                return tpl;
            }


            //商品分类初始化
            function init() {
                $tree = $('<ul class="sp-tree"></ul>').appendTo($('#categoryDIV'));

                $(document).click(function (e) {
                    if ($status) {
                        $tree.hide();
                        $status = false;
                    }
                });
                $tree.delegate('i', 'click', function (e) {
                    e.stopPropagation();
                    var _this = $(this);
                    var _h = _this.parent('h3');
                    var _box = _h.next('ul');
                    if (_box.css('display') === 'none') {
                        _box.show();
                        _this.html('-');
                    } else {
                        _box.hide();
                        _this.html('+');
                    }
                });
                $tree.delegate('b', 'click', function (e) {
                    e.stopPropagation();
                    $sort.val($(this).text());
                    $("#categoryId").val($(this).attr('data-id'));
                    $tree.hide();
                    $status = false;
                    $cateId = $(this).attr('data-id');
                    console.log($(this).attr('data-id') + " + " + $cateId);
                });
                $tree.click(function (e) {
                    e.stopPropagation();
                });
            }

            function render() {
                $tree.html(create($data));
                $sort = $('#sp-sort');
                $sort.click(function (e) {
                    e.stopPropagation();
                    var _this = $(this);
                    var pos = _this.offset();
                    var x = pos.left - 280;
                    var y = pos.top + _this.outerHeight() - 60;
                    $tree.css({
                        left: x,
                        top: y
                    }).show();
                    $status = true;
                });
            }

            // ajax 获得分类数据 完成后执行 init()
            $.ajax({
                url: '/ajax_goods/json_category',
                type: "POST",
                dataType: 'json',
                contentType: 'application/json',
                success: function (res) {
                    // $data = res.msg;
                    // $data.replace(/&quot;/g,'\"');
                    $data = eval('(' + res.msg + ')');
                    console.log($data);

                    init();
                    render();
                }
            });
        })
    </script>
    <script>


        $(function () {
            $("#submit_btn").click(function () {
                // 参数判断
                var title = $("input[name='title']").val()
                if (title == '') {
                    alert("请填写商品名称");
                    $("input[name='title']").focus();
                    return false;
                }
                var number = $("input[name='number']").val()
                if (number == '') {
                    alert("请填写商品编码");
                    $("input[name='number']").focus();
                    return false;
                }
                var regPos = /^\d+(\.\d+)?$/; //非负浮点数


                var cost_price = $("input[name='cost_price']").val();
                if(cost_price == '' ){
                    $("input[name='cost_price']").focus();
                    alert("请填写默认采购价");
                    return  false;
                } else if(regPos.test(cost_price)==false){
                    $("input[name='cost_price']").focus();
                    alert("请填写正确的默认采购价");
                    return  false;
                }else if(cost_price <= 0){
                    $("input[name='cost_price']").focus();
                    alert("默认采购价不能小于等于0");
                    return  false;
                }

                var salePrice = $("input[name='salePrice']").val();
                if(salePrice == '' ){
                    $("input[name='salePrice']").focus();
                    alert("请填写零售价");
                    return  false;
                } else if(regPos.test(salePrice)==false){
                    $("input[name='salePrice']").focus();
                    alert("请填写正确的零售价");
                    return  false;
                }else if(salePrice <= 0){
                    $("input[name='salePrice']").focus();
                    alert("零售价不能小于等于0");
                    return  false;
                }

                var categoryId = $("#categoryId").val();
                var category = $("input[name='category']").val();
                if (categoryId == 0) {
                    alert("请选择分类");
                    $("input[name='category']").focus();
                    return false;
                }
                var unit = $("#sp-unit").val();
                if (unit == null || unit == '') {
                    alert("请选择计量单位");
                    $("#sp-unit").focus();
                    return false;
                }
                var client = $("#sp-client").val();
                if (client == null || client == '') {
                    alert("请选择供应商");
                    $("#sp-client").focus();
                    return false;
                }
                var jijie = $("#jijie").val();

                if (jijie == null || jijie == '') {
                    alert("请填写服装属性");
                    $("#jijie").focus();
                    return false;
                }
                // var fenlei = $("#fenlei").val();
                // if (fenlei == null || fenlei == '') {
                //     alert("请填写服装属性");
                //     $("#fenlei").focus();
                //     return false;
                // }
                // var fengge = $("#fengge").val();
                // if (fengge == null || fengge == '') {
                //     alert("请填写服装属性");
                //     $("#fengge").focus();
                //     return false;
                // }


                var nianfen = $("#nianfen").val();
                if (nianfen == null || nianfen == '') {
                    alert("请填写年份属性");
                    $("#nianfen").focus();
                    return false;
                }
                // var locationId = $("#locationId").val();
                // if (locationId == null || locationId == '') {
                //     alert("请选择仓库");
                //     $("#locationId").focus();
                //     return false;
                // }

                var mianliao = $("#mianliao").val();
                if (mianliao == '') {
                    alert("请填写面料成分");
                    $("#mianliao").focus();
                    return false;
                }
                var yichang = $("#yichang").val();if (yichang == '') {alert("请填写衣长/裙长，单位cm");$("#yichang").focus();return false;}
                var xiuchang = $("#xiuchang").val();if (xiuchang == '') {alert("请填写袖长，单位cm");$("#xiuchang").focus();return false;}
                var jiankuo = $("#jiankuo").val();if (jiankuo == '') {alert("请填写肩阔，单位cm");$("#jiankuo").focus();return false;}
                var xiongkuo = $("#xiongkuo").val();if (xiongkuo == '') {alert("请填写胸阔，单位cm");$("#xiongkuo").focus();return false;}
                var yaokuo = $("#yaokuo").val();if (yaokuo == '') {alert("请填写腰阔，单位cm");$("#yaokuo").focus();return false;}
                var tunkuo = $("#tunkuo").val();if (tunkuo == '') {alert("请填写臀阔，单位cm");$("#tunkuo").focus();return false;}
                var zhongliang = $("#zhongliang").val();if (zhongliang == '') {alert("请填写重量，单位g");$("#zhongliang").focus();return false;}

                var beizhu = $("#beizhu").val();if (beizhu == '') {alert("请填写备注信息");$("#beizhu").focus();return false;}


                //检查颜色，颜色标签是必选
                if ($("input[name^='spec_code']") == null || $("input[name^='spec_code']").size() == 0) {
                    alert("请设置商品规格");
                    return false;
                }



                var returnResult = true;
                //规格编码
                $("input[name^='spec_code']").each(function (i, el) {
                    var specNumber = $(this).val();
                    if (specNumber == "") {
                        alert("请填写规格编码");
                        $(this).focus();
                        returnResult = false;
                        return false;
                    }
                });

                if (returnResult == false) return false;

                //图片上传
                $("input[name^='spec_image']").each(function (i, el) {
                    var specImage = $(this).val();
                    if (specImage == "") {
                        alert("请上传图片");
                        $(this).focus();
                        returnResult = false;
                        return false;
                    }
                });
                if (returnResult == false) return false;

                var fd = new FormData($('#uploadForm')[0]);
                $.ajax({
                    url: "/ajax_goods/goods_add2",
                    type: "POST",
                    dataType: "JSON",
                    data: $('#uploadForm').serialize(),
                    success: function (res) {
                        if (res.code == 0) {
                            window.location.href = "/goods/list";
                        } else {
                            alert(res.msg);
                        }
                        // alert(JSON.stringify(res));
                        return false;
                    }
                });

                return false;
            })
        })
    </script>
</div>
</body>
</html>
